<template>
    <div>
        <div class="join-list" v-for="(item,index) in list" v-bind:key="index">
            <div class="d-flex-pk align-items-center">
                <div class="portrait rounded-circle">
                    <van-image
                        round
                        width="15vw"
                        height="15vw"
                        class="rounded-circle"
                        :src="item.headPortrait ? item.headPortrait : imgSrc[0]"
                    />
                </div>
                <div class="center">
                    <div class="nickname">{{item.nickName}}</div>
                    <div class="use">
                        <span>本次使用福屏卷</span>
                        <span class="text-warning">{{item.fpCouponNum}}张</span>
                    </div>
                </div>
                <div class="date">{{item.createTime.substr(0,10)}}</div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "JoinList",
        props:{
            list : {
                type:Array,
                default(){
                    return [];
                }
            }
        },
        data(){
            return {
                imgSrc:[
                    require("@img/img-error.png")
                ]
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../treasure";
    .join-list{
        padding:8px 0;
    }
    .portrait{
        width:12vw;
        height: 12vw;
        flex: 0 0 15vw;
    }
    .center{
        margin:0 8px;
        flex:1;
        .nickname{
            color:$gray-900;
        }
        .use{

            color:$secondary;
        }
    }
    .date{
        color:$gray-500;
    }
</style>